<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="jquery-1.8.3.min.js"></script>
    <script src="vue-router.min.js"></script>
    <script src="axios.min.js"></script>
</head>
<body>
<div id="app">
    <form>
        <button @clikc="add()">添加</button>
        <input type="text" v-model="pojo.name" name="name">
        <input type="button" @click="findPage(1)">
        <table border="1">
            <tr>
                <td>id</td>
                <td>userId</td>
                <td>名称</td>
                <td>价格</td>
                <td>数量</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in page.records">
                <td>{{item.id}}</td>
                <td>{{item.userId}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.num}}</td>
                <td>
                    <input type="button" value="删除" @clikc="del(item.id)">
                </td>
            </tr>
        </table>
        <input type="button" value="首页" @click="findPage(1)">
        <input type="button" value="上一页"@click="findPage(page.hasPrevious)">
        <input type="button" value="下一页"@click="findPage(page.hasNext)">
        <input type="button" value="尾页" @click="findPage(page.pages)">
    </form>
</div>
    <script>
        new Vue({
            el:"#app",
            data:{
                page:{},
                pojo:{}
            },
            create(){
                this.findPage(1)
            },
            methods:{
              findPage(pageIndex){
                  axios.post("/order/findPage?pageIndex="+pageIndex,this.pojo).then(
                      res=>{
                          this.page=res.data
                      }
                  )
              }, add(){
                  location.href="add.html";
                },
                del(id){
                  axios.get("/order/del?id="+id).then(
                      res=>{
                          this.findPage(1)
                      }
                  )
                }
            }
        })
    </script>
</body>
</html>